@mixin menu-size($height, $padding, $font-size, $border-radius) {  
  .ui-menu-item {
    height: $height;
    line-height: $height;
    padding: 0 $padding;
    font-size: $font-size;

    &:first-child {
      border-top-left-radius: $border-radius;
      border-top-right-radius: $border-radius;
    }

    &:last-child {
      border-bottom-left-radius: $border-radius;
      border-bottom-right-radius: $border-radius;
    }
  }
}

.ui-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  max-height: 250px;
  outline: none;
  overflow: auto;
  @include menu-size($base-height, $base-padding, $base-fontSize, $base-radius);

  .ui-menu-item {
    position: relative;
    display: block;
    font-weight: normal;
    color: #666;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: background .3s ease;
    user-select: none;
    
    &:hover,
    .active {
      background: #eaf8fe;
    }

    &.selected {
      background: #d5f1fd;
    }

    &.disabled {
      color: #ccc;
      cursor: not-allowed;
    }
  }

  &.size-xl {
    @include menu-size($base-height-xl, $base-padding-xl, $base-fontSize-xl, $base-radius-xl);
  }
  &.size-lg {
    @include menu-size($base-height-lg, $base-padding-lg, $base-fontSize-lg, $base-radius-lg);
  }
  &.size-sm {
    @include menu-size($base-height-sm, $base-padding-sm, $base-fontSize-sm, $base-radius-sm);
  }
  &.size-xs {
    @include menu-size($base-height-xs, $base-padding-xs, $base-fontSize-xs, $base-radius-xs);
  }
}
